<template>
  <view class="reward-item" :class="{ 'unlocked': isUnlocked, 'locked': !isUnlocked && !canRedeem }">
    <view class="icon-container">
      <view class="icon">
        <text class="fa-icon">{{ icon }}</text>
      </view>
    </view>
    
    <view class="reward-info">
      <text class="name">{{ reward.name }}</text>
      <text class="description">{{ reward.description }}</text>
    </view>
    
    <view class="action-area">
      <view class="cost">
        <text class="score">{{ reward.score }}</text>
        <text class="icon">⭐</text>
      </view>
      
      <template v-if="isUnlocked">
        <text class="status unlocked">已解锁</text>
      </template>
      
      <template v-else-if="canRedeem">
        <button class="redeem-btn" @click="$emit('redeem', reward.id)">
          兑换
        </button>
      </template>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()

const props = defineProps({
  reward: {
    type: Object,
    required: true,
    default: () => ({ id: '', name: '', description: '', score: 0, icon: '' })
  }
})

const isUnlocked = computed(() => {
  return gameStore.unlockedRewards.includes(props.reward.id)
})

const canRedeem = computed(() => {
  return !isUnlocked.value && gameStore.totalScore >= props.reward.score
})

const icon = computed(() => {
  // 映射FontAwesome图标到简单符号
  const iconMap = {
    'lightbulb-o': '💡',
    'question-circle': '❓',
    'paint-brush': '🖌️',
    'forward': '⏩',
    'moon-o': '🌙',
    'star': '⭐'
  }
  return iconMap[props.reward.icon] || '🎁'
})
</script>

<style scoped>
.reward-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  border-radius: 8rpx;
  background-color: rgba(30, 30, 50, 0.5);
  margin-bottom: 16rpx;
  border: 1px solid rgba(108, 92, 231, 0.2);
  transition: all 0.3s;
}

.reward-item.unlocked {
  border-color: rgba(108, 92, 231, 0.7);
  box-shadow: 0 0 10rpx rgba(108, 92, 231, 0.2);
}

.reward-item.locked {
  opacity: 0.6;
  filter: grayscale(1);
}

.icon-container {
  margin-right: 16rpx;
}

.icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(108, 92, 231, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.reward-info {
  flex: 1;
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 4rpx;
}

.description {
  font-size: 24rpx;
  color: #aaa;
}

.action-area {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.cost {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.score {
  font-size: 28rpx;
  font-weight: bold;
  color: #FFD700;
}

.status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.status.unlocked {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.redeem-btn {
  background-color: #6C5CE7;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  font-size: 26rpx;
}
</style>